import React from "react";
import SearchTable from "components/searchTable/SearchTable.jsx";
import { openNotificationWithIcon } from "utils/comm";
import { connect } from "dva";
import Base from "@/pages/flowmonitor/components/variablelist/HistoricVariable/Base";

const emptyParams = {
  processInstanceIds: [],
  name: '',
  taskId: '',
};
@connect(({ FlowMonitor, loading, appListMenu, Public }) => ({
  historicVariableList: FlowMonitor.historicVariableList,
  focusApp: appListMenu.focusApp,
  loading,
  menuDataList: Public.menuDataList,
  resourceList: Public.resourceList,
}))
export default class HistoricVariable extends Base {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
    this.searchParams = emptyParams;

    this.state = {
      page: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  }

  componentWillMount() {
    this.initData();
  }

  componentDidUpdate(preProps) {
    const { focusApp } = this.props;
    const { focusApp: preFocusApp } = preProps;
    if (preFocusApp.id && `${preFocusApp.id || 0}` !== `${focusApp.id || 0}`) {
      // 应用切换更新页面数据
      this.resetPageData();
    }
  }

  resetPageData = () => {
    const { dispatch } = this.props;
    this.searchParams = emptyParams;
    if (this.tableForm) {
      this.tableForm.handleReset();
    }
    dispatch({
      type: "FlowMonitor/set/historicVariableList",
      payload: { datas: [], totalCount: 0 },
    });
    this.setState(
      {
        page: { pageNum: 1, pageSize: 10 },
      },
      () => {
        this.initData();
      },
    );
  };

  initData = () => {
    const { page } = this.state;
    const { dispatch } = this.props;
    const temp = {...this.searchParams};
    if (this.searchParams.processInstanceIds && typeof (this.searchParams.processInstanceIds) === "string"){
      temp.processInstanceIds = this.searchParams.processInstanceIds.split(/,|，/);
    }
    const params = { ...page, ...temp};
    dispatch({ type: "FlowMonitor/historicVariableList", payload: params });
  };

  handleSearch = (values, reset) => {
    const { page } = this.state;
    this.searchParams = reset ? emptyParams : values;
    this.setState({ page: { ...page, pageNum: 1 } }, () => {
      this.initData();
    });
  };

  // 页码页数改变
  handlePageChange = (pageNum, pageSize) => {
    this.setState({ page: { pageNum, pageSize } }, () => {
      this.initData();
    });
  };

  render() {
    return (
      <>
        <SearchTable
          ref={(r) => {
            if (r) {
              this.tableForm = r;
            }
          }}
          formConfig={this.getFormConfig()}
          handleSearch={this.handleSearch}
          tableProps={this.getAntTableProps()}
        />
      </>
    );
  }
}
